<template>
  <a-row class="login">
    <a-col :span="8" :offset="8" class="login-main">
      <h1 style="text-align: center"><rocket-two-tone />&nbsp;圣殿骑士售票系统</h1>
      <a-form
          :model="loginForm"
          name="basic"
          autocomplete="off"
      >
        <a-form-item
            label=""
            name="mobile"
            :rules="[{ required: true, message: '请输入手机号!' }]"
        >
          <a-input v-model:value="loginForm.mobile" placeholder="手机号"/>
        </a-form-item>

        <a-form-item
            label=""
            name="code"
            :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <a-input v-model:value="loginForm.code">
            <template #addonAfter>
              <div v-if="messageCodeVis" class="second-text">{{countdown}}秒后重新获取</div>
              <a  v-else  @click="sendCode">获取验证码</a>
            </template>
          </a-input>
          <!--<a-input v-model:value="loginForm.code" placeholder="验证码"/>-->
        </a-form-item>

        <a-form-item>
          <a-button type="primary" block @click="login">登录</a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>
<script setup>
import {reactive,ref} from 'vue';
import axios from 'axios';
import { notification } from 'ant-design-vue';
import store from "@/store";
import router from "@/router";

const messageCodeVis = ref(false);
let countdown = ref(60);

const loginForm = reactive({
  mobile: '13000000000',
  code: '',
});
const login = () => {
  axios.post("/member/login", loginForm).then((response) => {
    let data = response.data;
    if (data.success) {
      notification.success({ description: '登录成功！' });
      console.log(data.content)
      store.commit("setMember", data.content);
      // 登录成功，跳到控台主页
      router.push("/");
    } else {
      notification.error({ description: data.message });
    }
  })
};
//发送验证码
const sendCode = () => {
  axios.post("/member/send-code", {
    mobile: loginForm.mobile
  }).then(response => {
    let data = response.data;
    if (data.success) {
      notification.success({ description: '发送验证码成功！' });
      messageCodeVis.value = true;
      startCountdown();
      loginForm.code = "8888";
    } else {
      notification.error({ description: data.message });
    }
  });
};
/* 倒计时 */
const startCountdown = () => {
  const intervalId = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(intervalId)
      messageCodeVis.value = false
    }
  }, 1000)
}

const onFinish = values => {
  console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

</script>
<style>
.login-main h1 {
  font-size: 25px;
  font-weight: bold;
}

.login-main {
  margin-top: 100px;
  padding: 30px 30px 20px;
  border: 2px solid grey;
  border-radius: 10px;
  background-color: #fcfcfc;
}
</style>
